<template>
	<u-popup :show="show" bgColor="rgba(0,0,0,0)" @close="closeMore">
		<image :src="imgUrl + 'imgs/home/popbg.png'" mode="widthFix" class="popBgc"></image>
		<view class="popup_con">
			<view class="fixedTitle_oblation">
				<view class="left"></view>
				<view class="middle">叩拜</view>
				<view class="right">
					<u-icon
						@click="closeMore"
						class="close"
						name="close"
						color="black"
						size="20"
					></u-icon>
				</view>
			</view>

			<view class="koubai">
				<view
					class="koubai_item"
					v-for="(item, index) in koubai_list"
					@click="koubai(item,index)"
				>
					<view class="koubai_img">
						<image :src="imgUrl + 'imgs/worship/koubai.png'" mode="heightFix"></image>
					</view>
					{{ item.name }}
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
import { ref } from 'vue';
import { onReady, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { imgUrl } from '@/external/utils/imgUrl.js';
import WorshipApi from '@/API/worship';
const worshipApi = new WorshipApi();

const { peopleId } = defineProps({
	peopleId: {
		type: String,
		required: true,
		default: ''
	}
});
const emits = defineEmits(['koubai']);
const koubai_list = ref([
	{
		name: '拱手礼男'
	},
	{
		name: '拱手礼女'
	}
]);
const show = ref(false);

const closeMore = (item) => {
	show.value = false;
};

const koubai = (item,index) => {
	emits('koubai', item, index + 1);
};

defineExpose({
	show
});
</script>

<style lang="scss">
::v-deep.u-popup__content {
	padding: 0 !important;
}

.popup_con {
	position: relative;
	background: linear-gradient(180deg, rgba(255, 234, 195, 0.6) 0%, rgba(255, 255, 255, 0) 100%),
		#ffffff;
	border-radius: 32rpx 32rpx 0 0;
	padding-bottom: 48rpx;
}

.popBgc {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
}

.fixedTitle_oblation {
	width: 100%;
	font-size: 32rpx;
	color: #524630;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left,
	.right {
		width: 100rpx;
		flex-shrink: 0;
	}

	.right {
		display: flex;
		justify-content: flex-end;
		padding-right: 32rpx;
		box-sizing: border-box;
	}

	.middle {
		flex: 1;
		text-align: center;
	}
}

.close {
	width: 48rpx;
	height: 48rpx;
}

.koubai {
	width: 100%;
	padding: 20rpx 40rpx 50rpx;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-row-gap: 64rpx;

	.koubai_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 28rpx;

		.koubai_img {
			width: 144rpx;
			height: 144rpx;
			margin-bottom: 24rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #d4c6b3;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				height: 100rpx;
			}
		}
	}
}
</style>
